// 清除默认样式
@use './reset.scss' as *;
@use './element-ui.scss' as *;

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  user-select: none;
}

input,
textarea {
  user-select: text;
}

img {
  -webkit-user-drag: none; /* 禁用拖拽对于基于WebKit的浏览器（如Chrome和Safari） */
}

body {
  width: 100vw;
  height: auto;
  overflow-x: hidden;
}

#main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.titlebar {
  height: $titlebar-height;
  /* background: var(--color-background);
  color: var(--ev-c-white-mute); */
  background: $main-bg-color;
  // backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: sticky;
  top: 0;
  app-region: drag;
  padding: 0 calc($titlebar-height * 2);
  z-index: 9;
}

.main-box {
  // height: calc(100vh - $titlebar-height);
  overflow: auto;
  overflow-x: hidden;
  flex: 1;
}

.el-scrollbar__bar.is-vertical {
  z-index: 9;
}

// .el-overlay {
// backdrop-filter: blur(3px);
// }

// 超出省略,最多5行
@for $i from 1 through 5 {
  .text-ellipsis-#{$i} {
    // vue下，单行和多行显示省略号需要单独处理
    @if $i == '1' {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    } @else {
      display: -webkit-box !important;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: $i;
      -webkit-box-orient: vertical !important;
    }
  }
}

.height-inherit {
  height: inherit;
}

// 视口 背景样式、表格头部
.tab-header-btn,
.form-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  margin: 0 0 10px;
  background: var(--el-fill-color-blank);
}

.form-inline {
  width: 100%;

  .el-select {
    width: 100%;
  }
}

.align-end {
  align-items: end;
}

.pmb-0 {
  padding-bottom: 0 !important;
  // margin-bottom: 0 !important;
}

.form-search {
  margin-left: 20px;
  margin-bottom: 18px;
}

.table-view {
  height: 100%;
}

.pagination-view {
  margin: 0;
  padding: 10px;
  display: flex;
  align-items: center;
  background: var(--el-fill-color-blank);
}

// 解决Element UI 表格鼠标无法滚动问题
.el-table__body-wrapper tr td.el-table-fixed-column--left,
.el-table__body-wrapper tr td.el-table-fixed-column--right,
.el-table__body-wrapper tr th.el-table-fixed-column--left,
.el-table__body-wrapper tr th.el-table-fixed-column--right,
.el-table__footer-wrapper tr td.el-table-fixed-column--left,
.el-table__footer-wrapper tr td.el-table-fixed-column--right,
.el-table__footer-wrapper tr th.el-table-fixed-column--left,
.el-table__footer-wrapper tr th.el-table-fixed-column--right,
.el-table__header-wrapper tr td.el-table-fixed-column--left,
.el-table__header-wrapper tr td.el-table-fixed-column--right,
.el-table__header-wrapper tr th.el-table-fixed-column--left,
.el-table__header-wrapper tr th.el-table-fixed-column--right {
  overflow: hidden;
}

.el-overlay {
  margin-top: $titlebar-height;
}

// dark light 切换动画
::view-transition-old(root) {
  animation: none;
}

::view-transition-new(root) {
  mix-blend-mode: normal;
  animation: clip 600ms ease-in;
}

@keyframes clip {
  from {
    clip-path: circle(0% at var(--x) var(--y));
  }

  to {
    clip-path: circle(100% at var(--x) var(--y));
  }
}
